<template>
  <div>
    <n-modal
      :show="props.showModal"
      :on-mask-click="maskClick"
      :class="{ 'blow-up': isBlowUp }"
    >
      <n-card
        style="width: 50%; max-height: 60vh; min-width: 650px"
        :title="props.dialogTitle"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        header-style="padding:20px;padding-bottom:10px;"
        content-style="overflow: hidden; overflow-y: auto;padding:20px;padding-top:0px;"
      >
        <template #header-extra>
          <n-button @click="closeModal" text size="tiny" color="#ff69b4">
            <template #icon>
              <n-icon size="20">
                <Close></Close>
              </n-icon>
            </template>
          </n-button>
        </template>
        <div style="margin: 20px 0px">
          <n-form
            label-placement="left"
            ref="formRef"
            :label-width="80"
            :model="formValue"
            :rules="rules"
            :size="size"
          >
            <n-form-item label="字典名称" path="name">
              <n-input
                v-model:value="formValue.name"
                placeholder="请输入字典名称"
              />
            </n-form-item>
            <n-form-item label="字典编码" path="code">
              <n-input
                v-model:value="formValue.code"
                placeholder="请输入字典编码"
              />
            </n-form-item>
            <n-form-item label="排序" path="sort">
              <n-input-number
                style="width: 100%"
                v-model:value="formValue.sort"
                clearable
                placeholder="请输入排序，数字越大越靠前"
              />
              <!-- <n-input
                v-model.number="formValue.sort"
                v-model:value="formValue.sort"
                :allow-input="onlyAllowNumber"
                placeholder="请输入排序，数字越大越靠前"
                :input-props="{ type: 'number' }"
              /> -->
            </n-form-item>

            <n-form-item label="是否启用">
              <n-switch v-model:value="formValue.enable" size="medium">
                <template #checked> 启用 </template>
                <template #unchecked>禁用 </template>
                <template #checked-icon>
                  <n-icon :component="EyeOutline" />
                </template>
                <template #unchecked-icon>
                  <n-icon :component="EyeOffOutline" />
                </template>
              </n-switch>
            </n-form-item>
            <n-form-item label="备注" path="description">
              <n-input
                v-model:value="formValue.description"
                type="textarea"
                placeholder="请输入备注"
              />
            </n-form-item>
          </n-form>
        </div>
        <template #action>
          <div
            style="
              margin: -15px;
              display: flex;
              justify-content: flex-end;
              gap: 10px;
            "
          >
            <n-button size="small" @click="closeModal">取消</n-button>
            <n-button size="small" type="primary" @click="handleValidateClick">
              {{ isUpdate ? "立即更新" : "确定" }}
            </n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "vuex";
import { Close, EyeOutline, EyeOffOutline } from "@vicons/ionicons5";
import {
  createDictionary,
  getDictionaryById,
  updateDictionary,
} from "@/api/dictionary";
import {
  createDictionaryRequest,
  updateDictionaryRequest,
} from "@/models/dictionary/model";

const props = defineProps({
  showModal: {
    type: Boolean,
    default: () => false,
  },
  dialogType: {
    type: Number,
    default: () => 1,
  },
  dialogTitle: {
    type: String,
    default: () => "新增字典类型",
  },
});
const formRef: any = ref(null);
const isBlowUp = ref(false);
const formValue = ref<createDictionaryRequest & { id?: string }>({
  id: null,
  name: null,
  code: null,
  description: null,
  enable: true,
  sort: 0,
});
const onlyAllowNumber = (value) => !value || /^\d+$/.test(value);
const rules = {
  name: {
    required: true,
    trigger: ["blur", "input"],
    message: "请输入字典名称",
  },
  code: {
    type: "string",
    required: true,
    trigger: ["blur", "input"],
    message: "请输入字典编码",
  },
  sort: {
    type: "number",
    required: true,
    trigger: ["blur", "input"],
    message: "请输入排序",
  },
};

const isUpdate = ref(false);
const emit = defineEmits(["closeModal", "getDicList"]);

const init = (id: String) => {
  isUpdate.value = true;
  getDictionaryById({ id: id }).then((res) => {
    formValue.value.name = res.data.name;
    formValue.value.code = res.data.code;
    formValue.value.enable = res.data.enable;
    formValue.value.description = res.data.description;
    formValue.value.sort = res.data.sort;
    formValue.value.id = id;
  });
};
const closeModal = () => {
  isUpdate.value = false;
  setTimeout(() => {
    formValue.value.name = null;
    formValue.value.code = null;
    formValue.value.enable = true;
    formValue.value.description = null;
    formValue.value.sort = 0;
  }, 100);

  emit("closeModal");
};
const handleValidateClick = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      if (!isUpdate.value) {
        createDictionary(formValue.value).then((res) => {
          if (res.code == 200) {
            closeModal();
            emit("getDicList");
          } else {
            window.$message.error(res.message);
          }
        });
      } else {
        updateDictionary(formValue.value).then((res) => {
          if (res.code == 200) {
            closeModal();
            emit("getDicList");
          } else {
            window.$message.error(res.message);
          }
        });
      }
    } else {
      console.log(formValue.value);
      window.$message.error("表单验证错误");
    }
  });
};
const maskClick = () => {
  isBlowUp.value = true;
  setTimeout(() => {
    isBlowUp.value = false;
  }, 500);
};

defineExpose({ init });
</script>

<style scoped>
.blow-up {
  animation: scaleAnimation 0.5s infinite;
  transform-origin: center center;
  /* 设置缩放中心为元素中心点 */
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
    transform-origin: center center;
  }

  50% {
    transform: scale(1.1);
    /* 在动画中点缩放到1.1倍 */
    transform-origin: center center;
  }

  100% {
    transform: scale(1);
    /* 在动画结束时缩放回原始大小 */
    transform-origin: center center;
  }
}
</style>
